<!DOCTYPE html>
<html>
<head>
    <title>Fraunhofer Diffraction Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="420"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.lineCap = 'round';

        // Helper function to draw arrow heads
        function drawArrowHead(fromX, fromY, toX, toY, size) {
            const angle = Math.atan2(toY - fromY, toX - fromX);
            ctx.beginPath();
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - size * Math.cos(angle - Math.PI / 6), toY - size * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - size * Math.cos(angle + Math.PI / 6), toY - size * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Main Drawing ---

        // Parameters
        const x_start_rays = 50;
        const x_slit = 180;
        const x_lens = 350;
        const x_focal_plane = 520;

        const y_axis = 210; // Not a drawn axis, just a reference
        const slit_width = 80;
        const slit_top = y_axis - slit_width / 2;
        const slit_bottom = y_axis + slit_width / 2;
        
        const angleDeg = 12;
        const angleRad = angleDeg * Math.PI / 180;
        const tanAngle = Math.tan(angleRad);

        // 1. Incident Plane Wave (Rays)
        ctx.beginPath();
        const ray_y_coords_at_slit = [175, 195, 215, 235];
        ray_y_coords_at_slit.forEach(y_end => {
            const x_end = x_slit - 60;
            const x_start = x_start_rays;
            const y_start = y_end + (x_end - x_start) * tanAngle;
            ctx.moveTo(x_start, y_start);
            ctx.lineTo(x_end, y_end);
            drawArrowHead(x_start, y_start, x_end, y_end, 8);
        });
        ctx.stroke();

        // 2. Angle theta markup
        const angle_ref_x = x_slit - 60;
        const angle_ref_y = ray_y_coords_at_slit[3];
        const angle_start_x = angle_ref_x - 50;
        
        ctx.beginPath();
        ctx.setLineDash([4, 4]);
        ctx.moveTo(angle_start_x, angle_ref_y);
        ctx.lineTo(angle_ref_x, angle_ref_y);
        ctx.stroke();
        ctx.setLineDash([]);
        
        ctx.beginPath();
        ctx.arc(angle_ref_x, angle_ref_y, 25, -angleRad, 0);
        ctx.stroke();
        
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('θ', angle_ref_x - 40, angle_ref_y + 5);

        // 3. Slit plane
        ctx.beginPath();
        // Top part of the screen
        ctx.moveTo(x_slit, 50);
        ctx.lineTo(x_slit, slit_top);
        drawArrowHead(x_slit, slit_top, x_slit, 50, 10);
        // Bottom part of the screen
        ctx.moveTo(x_slit, slit_bottom);
        ctx.lineTo(x_slit, 370);
        drawArrowHead(x_slit, slit_bottom, x_slit, 370, 10);
        ctx.stroke();
        
        // Label 'd' for slit width
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('d', x_slit - 40, y_axis + 5);

        // 4. Lens
        ctx.beginPath();
        const lens_height = 160;
        const lens_top_y = y_axis - lens_height / 2;
        const lens_bottom_y = y_axis + lens_height / 2;
        const lens_thickness = 20;
        ctx.moveTo(x_lens, lens_top_y);
        ctx.quadraticCurveTo(x_lens + lens_thickness, y_axis, x_lens, lens_bottom_y);
        ctx.quadraticCurveTo(x_lens - lens_thickness, y_axis, x_lens, lens_top_y);
        ctx.stroke();
        
        // 5. Rays from slit to focal point (through lens)
        const focal_point_y = 150;
        const rays_through_lens_y_slit = [slit_top + 10, y_axis, slit_bottom - 10];
        
        ctx.beginPath();
        rays_through_lens_y_slit.forEach(y_start => {
            // Path from slit to lens
            const x_start_segment = x_slit;
            const y_at_lens = y_start - (x_lens - x_slit) * tanAngle;
            ctx.moveTo(x_start_segment, y_start);
            ctx.lineTo(x_lens, y_at_lens);

            // Path from lens to focal plane
            ctx.moveTo(x_lens, y_at_lens);
            ctx.lineTo(x_focal_plane, focal_point_y);
        });
        ctx.stroke();

        // 6. Focal Plane (Screen)
        ctx.beginPath();
        ctx.moveTo(x_focal_plane, 50);
        ctx.lineTo(x_focal_plane, 370);
        ctx.stroke();

        // 7. Focal length 'f' markup
        const f_label_y = 340;
        ctx.beginPath();
        ctx.moveTo(x_lens, f_label_y - 5);
        ctx.lineTo(x_lens, f_label_y + 5);
        ctx.moveTo(x_focal_plane, f_label_y - 5);
        ctx.lineTo(x_focal_plane, f_label_y + 5);
        ctx.moveTo(x_lens, f_label_y);
        ctx.lineTo(x_focal_plane, f_label_y);
        ctx.stroke();
        
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('f', (x_lens + x_focal_plane) / 2 - 5, f_label_y - 10);

        // 8. Figure Caption
        ctx.font = 'bold 24px Times New Roman';
        ctx.fillText('Fig. 2.32', 250, 410);

    </script>
</body>
</html>